<template>
  <div>
    <v-touch class="swiper-div" @swiperight="onSwiperRight" :swipe-options="{direction: 'horizontal'}">
      <div class="header">
        <div class="product-header-title"></div>

        <div class="div-align-justify-center">
          <div class="search-div-left div-align-justify-center">
            <div class="search-div-left-left div-align-justify-center">
              <img class="icon-16" src="@/static/icon/search.png" alt=""/>
            </div>
            <div class="search-div-left-middle div-align-justify-center">
              <form @submit.prevent="formSubmit" action="javascript:return true">
                <input type="search" v-model="searchValue" placeholder="搜索商品" @keyup.13="onSearch">
              </form>
            </div>
          </div>
          <div class="search-div-right div-align-justify-center" @click="onCancel">
            取消
          </div>
        </div>

        <ul class="paragraph-p2-light body-content">
          <li v-if="isAdmin">
            <a :class="tab === productListTypeItemList.toStorage ? 'product-nav-active': '' "
               @click="tab = productListTypeItemList.toStorage;key.toStorage = new Date().getTime();"
            >
              拟入库({{ count.toStorage }})
            </a>
          </li>
          <li>
            <a :class="tab === productListTypeItemList.storage ? 'product-nav-active': '' "
               @click="tab = productListTypeItemList.storage;key.storage = new Date().getTime();"
            >
              正式入库({{ count.storage }})
            </a>
          </li>
          <li>
            <a :class="tab === productListTypeItemList.removed ? 'product-nav-active': '' "
               @click="tab = productListTypeItemList.removed;key.removed = new Date().getTime();"
            >
              已下架({{ count.removed }})
            </a>
          </li>
        </ul>
      </div>
      <div class="search-body">
        <div v-if="isAdmin && tab === productListTypeItemList.toStorage" class="margin-top-div-30">
          <main-empty v-if="count.toStorage === 0"
                      class="margin-top-div-117"
                      :list-code="productListType"
                      :list-item-code="productListTypeItemList.search"
          ></main-empty>
          <item-list v-if="count.toStorage > 0"
                     :key="key.toStorage"
                     :search-value="searchValue"
                     :product-code="productCode"
                     :list-code="productListType"
                     :list-item-code="productListTypeItemList.toStorage"
          ></item-list>
        </div>
        <div v-if="tab === productListTypeItemList.storage"  class="margin-top-div-30">
          <main-empty v-if="count.storage === 0"
                      class="margin-top-div-117"
                      :list-code="productListType"
                      :list-item-code="productListTypeItemList.search"
          ></main-empty>
          <item-list v-if="count.storage > 0"
                     :key="key.storage"
                     :search-value="searchValue"
                     :product-code="productCode"
                     :list-code="productListType"
                     :list-item-code="productListTypeItemList.storage"
          ></item-list>
        </div>
        <div v-if="tab === productListTypeItemList.removed"  class="margin-top-div-30">
          <main-empty v-if="count.removed === 0"
                      class="margin-top-div-117"
                      :list-code="productListType"
                      :list-item-code="productListTypeItemList.search"
          ></main-empty>
          <item-list v-if="count.removed > 0"
                     :key="key.removed"
                     :search-value="searchValue"
                     :product-code="productCode"
                     :list-code="productListType"
                     :list-item-code="productListTypeItemList.removed"
          ></item-list>
        </div>
      </div>
    </v-touch>
  </div>
</template>

<script>
import ItemList from '@/components/ItemList'
import {getProductByCode, searchProduct} from "@/request/api";
import {Toast} from "vant";
import MainEmpty from '@/components/MainEmpty'

export default {
  name: "ProductViewSearch",
  components: {
    ItemList,
    MainEmpty,
  },
  data() {
    return {
      tab: this.GLOBAL.listItemType.product.toStorage,
      productListType: this.GLOBAL.listType.search,
      productListTypeItemList: this.GLOBAL.listItemType.product,
      isAdmin: this.$baseJS.getLoginUser().isAdmin,
      searchValue: this.$route.query.searchValue,
      productCode: this.$route.query.productCode,
      key: {
        toStorage: new Date().getTime(),
        storage: new Date().getTime(),
        removed: new Date().getTime(),
        search: new Date().getTime(),
      },
      count: {
        count: 0,
        toStorage: 0,
        storage: 0,
        removed: 0,
      },
    };
  },
  mounted() {
    const productCode = this.$route.query.productCode
    if (productCode) {
      getProductByCode({product_code: productCode}).then(res => {
        const {State, Msg, Data} = res
        if (State) {
          const { product_status } = Data[0]
          this.count.toStorage = product_status === '拟入库' ? 1 : 0
          this.count.storage = product_status === '正式入库' ? 1 : 0
          this.count.removed = product_status === '已下架' ? 1 : 0
        } else { Toast(Msg) }
      }).catch(() => {})
    }
    if (!this.isAdmin) {
      this.tab = this.GLOBAL.listItemType.product.storage
    }
    this.onSearch()
  },
  methods: {
    formSubmit () { return false },
    onSearch() {
      if (this.searchValue) {
        searchProduct({ key_word: this.searchValue, page_number: 1, size: 1000, product_status: '拟入库',}).then(res => {
          const {State, Msg, Data} = res
          if (State) {
            const {total} = Data
            this.count.toStorage = total
            // this.key.toStorage = new Date().getTime()
          } else { Toast(Msg) }
        })
        searchProduct({ key_word: this.searchValue, page_number: 1, size: 1000, product_status: '正式入库',}).then(res => {
          const {State, Msg, Data} = res
          if (State) {
            const {total} = Data
            this.count.storage = total
            // this.key.storage = new Date().getTime()
          } else { Toast(Msg) }
        })
        searchProduct({ key_word: this.searchValue, page_number: 1, size: 1000, product_status: '已下架',}).then(res => {
          const {State, Msg, Data} = res
          if (State) {
            const {total} = Data
            this.count.removed = total
            // this.key.removed = new Date().getTime()
          } else { Toast(Msg) }
        })
      }

    },
    onCancel() {
      this.$router.push(this.GLOBAL.pathSetting.product.main)
    },
    onSwiperRight() {
      this.$router.go(-1)
    }
  },
};
</script>
<style scoped>
.header {
  height: 120px;
  width: 100%;
  background: #fcd538;
  position: fixed;
  top: 0px;
  z-index: 3;
}
.search-body {
  margin-top: 120px;
  height: 60vh;
}
.product-header-title {
  height: 44px;
}
.search-div-left {
  width: 90%;
  height: 38px;
  /*padding: 8px 8px 8px 0px;*/
  margin: 0 16px;
  background: #FFF5CC;
  border-radius: 8px;

}
.search-div-right {
  width: 10%;
  height: 38px;
  margin-right: 16px;
}
.search-div-left-left {
  margin: 4px 8px;
  width: 10%;
  height: 38px;
}
.search-div-left-middle {
  width: 90%;
  padding-right: 8px;
}
input {
  width: 250px;
  height: 22px;
  border: none;
  background: #FFF5CC;
}
ul {
  height: 26px;
  background-color: #fcd538;
}

ul li {
  display: inline;
  margin-right: 24px;
  height: 26px;
}

ul a {
  /* Paragraph/P2/light */
  font-family: PingFang SC;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
  /* identical to box height, or 157% */
  color: #424242;
  line-height: 40px;
  text-decoration: none;
}

</style>